<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Model Configuration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>AI Model Configuration</h2>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">Model Settings</h5>
                
                <form>
                    <div class="mb-3">
                        <label for="modelProvider" class="form-label">Model Provider</label>
                        <select class="form-select" id="modelProvider">
                            {% for provider in config['models'] %}
                            <option value="{{ provider }}">{{ provider|title }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="availableModel" class="form-label">Available Models</label>
                        <select class="form-select" id="availableModel">
                            {% for model in config['models']['openai']['available_models'] %}
                            <option value="{{ model }}" {% if model == current_model %}selected{% endif %}>
                                {{ model }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="apiKey" class="form-label">API Key</label>
                        <input type="password" class="form-control" id="apiKey" 
                               value="{{ config['models']['openai']['api_key'] }}">
                    </div>

                    <div class="mb-3">
                        <label for="baseUrl" class="form-label">Base URL</label>
                        <input type="text" class="form-control" id="baseUrl" 
                               value="{{ config['models']['openai']['base_url'] }}">
                    </div>

                    <button type="submit" class="btn btn-primary">Save Configuration</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('modelProvider').addEventListener('change', function() {
            const provider = this.value;
            const models = JSON.parse('{{ config["models"]|tojson|safe }}');
            
            const modelSelect = document.getElementById('availableModel');
            modelSelect.innerHTML = '';
            
            if (models[provider]) {
                models[provider].forEach(model => {
                    const option = new Option(model, model);
                    modelSelect.add(option);
                });
            }
            // Update API Key and Base URL
            document.getElementById('apiKey').value = config['models'][provider]['api_key'];
            document.getElementById('baseUrl').value = config['models'][provider]['base_url'];
        });
    </script>
</body>
</html>